<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="vmware-disk-container">
    <lv-tabs [(lvActiveIndex)]="diskType">
        <ng-container *ngFor='let disk of disksInfo'>
            <lv-tab lvTitle='{{disk.type}}' [lvId]="disk.type">
                <ng-template lv-tab-lazy *ngIf="disk.type === diskType">
                    <lv-tabs [(lvActiveIndex)]="disk.activeIndex" [lvSize]="'small'">
                        <lv-tab [lvTitle]="total" [lvId]="'total'">
                            <ng-template #total>
                                <div class="host-register-tabnav">
                                    <span>{{'common_total_label' | i18n}}</span>
                                    <span class="host-register-tabnav-num">{{disk.allDatas?.length}}</span>
                                </div>
                            </ng-template>
                            <ng-template lv-tab-lazy>
                                <ng-container *ngTemplateOutlet="tableTpl;context: { $implicit: disk}">
                                </ng-container>
                            </ng-template>
                        </lv-tab>
                        <lv-tab [lvTitle]='selected' [lvId]="'selected'">
                            <ng-template #selected>
                                <div class="host-register-tabnav">
                                    <span>{{'common_selected_label' | i18n}}</span>
                                    <span class="host-register-tabnav-num">{{disk.selection?.length}}</span>
                                </div>
                            </ng-template>
                            <ng-template lv-tab-lazy>
                                <ng-container *ngTemplateOutlet="tableTpl;context: { $implicit:disk }">
                                </ng-container>
                            </ng-template>
                        </lv-tab>
                    </lv-tabs>
                    <ng-template #tableTpl let-disk>
                        <div class="table-container">
                            <lv-datatable lvSize="small"
                                [lvPaginator]="disk.activeIndex === 'total' ? totalPage:selectedPage"
                                [lvData]="disk.activeIndex === 'total'? disk.allDatas : disk.selection" #lvTable
                                lvSelectionMode="multiple" [(lvSelection)]="disk.selection"
                                (lvSelectionChange)="selectionChange()" lvCompareWith="uuid">
                                <thead>
                                    <tr>
                                        <th *ngIf="disk.activeIndex === 'total'" lvShowCheckbox width="64px"
                                            [lvRowsData]="lvTable.renderData"></th>
                                        <ng-container *ngFor="let column of columns">
                                            <ng-container *ngIf="!column.hidden">
                                                <th lvCellKey='column.key' [lvAlign]="column.align">{{column.label}}
                                                    <ng-container *ngIf="column.key ==='slot'">
                                                        <i lv-icon="lv-icon-search" [lvColorState]="true"
                                                            [ngClass]="{ active: !!queryDeviceId }" lv-popover
                                                            [lvPopoverContent]="queryDeviceIdTpl"
                                                            lvPopoverPosition="bottom" lvPopoverTrigger="click"
                                                            #deviceIdPopover="lvPopover"></i>
                                                    </ng-container>
                                                </th>

                                            </ng-container>
                                        </ng-container>
                                    </tr>
                                </thead>
                                <tbody>
                                    <ng-container *ngFor="let item of lvTable.renderData; let i = index">
                                        <tr>
                                            <td *ngIf="disk.activeIndex === 'total'" lvShowCheckbox [lvRowData]="item">
                                            </td>
                                            <ng-container *ngFor="let column of columns">
                                                <ng-container *ngIf="!column.hidden">
                                                    <td [lvAlign]="column.align">
                                                        <ng-container [ngSwitch]="column.key">
                                                            <ng-container *ngSwitchCase="'size'">
                                                                {{item.size |
                                                                capacityCalculateLabel:'1.0-0':unitconst.BYTE:false}}
                                                            </ng-container>
                                                            <ng-container *ngSwitchDefault>
                                                                <span lv-overflow>{{ item[column.key]}}</span>
                                                            </ng-container>
                                                        </ng-container>
                                                    </td>
                                                </ng-container>
                                            </ng-container>
                                        </tr>
                                    </ng-container>
                                </tbody>
                            </lv-datatable>
                        </div>
                        <!-- totalTable分页  -->
                        <lv-paginator #totalPage [lvPageSizeOptions]="sizeOptions" lvMode="simple"
                            [hidden]="disk.activeIndex !== 'total' || !disk.allDatas.length">
                        </lv-paginator>

                        <!-- selectedTable分页 -->
                        <lv-paginator #selectedPage [lvPageSizeOptions]="sizeOptions" lvMode="simple"
                            [hidden]="disk.activeIndex === 'total' || !disk.selection.length">
                        </lv-paginator>
                    </ng-template>
                </ng-template>
            </lv-tab>
        </ng-container>
    </lv-tabs>
</div>